import React, { useState } from 'react'
import CommonFetch from '@/config/CommonFetch'
import { Form, Input, Button } from 'antd'
import { FormConfig, layout } from './config'
import _ from 'lodash'

const FirstHello = () => {
  const [html, setHtml] = useState('')
  const Components = {
    Input,
  }

  const onFinish = (values) => {
    // fetch请求
    // 如果传递的参数为字符串格式的,需要修改请求头中Content-Type的值,因为Content-Type默认是另一种值
    // 如果传递的参数为JSON格式的,也需要修改请求头中Content-Type的值,因为Content-Type默认是另一种值
    // 如果你传递的参数是string格式的,Content-Type为JSON格式的,那么后端会以为是你传的是JSON格式的参数,这样就会报错
    // 如果你传递的参数是JSON格式的,Content-Type为string格式的,那么后端会以为你传的是string格式的参数,这样在后续的操作中机会报错
    // 是string格式的Content-Type就要为string格式的,否则报错
    // 是JSON格式的Content-Type就要为JSON格式的,否则报错
    CommonFetch.STRINGpost_text('/sfz', 'q=' + values.sfz).then((ret) => {
      ret && setHtml(ret)
    })
  }

  return (
    <div>
      <Form name="sfcCS" {...layout} onFinish={onFinish}>
        {_.map(FormConfig, (item, key) => {
          const Component = item.component ? Components[item.component] : ''
          return (
            <div key={item.id} className="form-item-content">
              <div style={{ width: 'auto', flex: 1 }}>
                <Form.Item
                  name={item.name}
                  label={item.label}
                  rules={item.rules}
                  {...item.props}
                >
                  <Component
                    placeholder={item.placeholder}
                    {...item.componentProps}
                  />
                </Form.Item>
              </div>
              <div className="content-notes">{item.notes}</div>
            </div>
          )
        })}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <p dangerouslySetInnerHTML={{ __html: html }}></p>
    </div>
  )
}

export default FirstHello
